{% extends 'base/base_table.html' %}
{% load tags %}

{% block css %}
    <link href="/static/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
{% endblock %}

{% block title %}ITAdmin | 服务器{% endblock %}


{% block other %}
<div class="ibox-content m-b-sm border-bottom">
    <div class="row">
        <form action="{{ request.path }}">
        <div class="col-sm-4">
            <div class="form-group">
                <label class="control-label" for="date_added">开始时间</label>
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input id="date_added" name="start" type="text" class="form-control" value="{{ start }}">
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label class="control-label" for="date_modified">结束时间</label>
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input id="date_modified" name="end" type="text" class="form-control" value="{{ end }}">
                </div>
            </div>
        </div>
        <div class="col-sm-1">
            <div class="form-group">
                <label class="control-label" for="date_modified">时间过滤</label>
                <input type="hidden" value="{{ last_search }}" name="top-search">
                <button class="form-control" type="submit"><strong>确定</strong></button>
            </div>
        </div>
        </form>
    </div>
</div>
{% endblock %}

{% block table_btn %}
{% if perms.Assets.delete_server %}<button class="btn btn-sm btn-danger" id="del_server"><strong>删除服务器</strong></button>{% endif %}
{% if perms.Assets.add_server %}<button class="btn btn-sm btn-success" id="add_server"><strong>添加服务器</strong></button>{% endif %}
<button class="btn btn-sm btn-primary" id="download"><strong>导出EXCEL</strong></button>
{% endblock %}


{% block table_thead %}
<tr>
    {% if perms.Assets.change_server %}
    <th>
        <div class="checkbox i-checks" id="check_all">
            <input type="checkbox">
        </div>
    </th>
    {% endif %}
    <th style="text-align: center;vertical-align: middle">主机名</th>
    <th style="text-align: center;vertical-align: middle">所在机房</th>
    <th style="text-align: center;vertical-align: middle">内网IP</th>
    <th style="text-align: center;vertical-align: middle">外网IP</th>
    <th style="text-align: center;vertical-align: middle">内存</th>
    <th style="text-align: center;vertical-align: middle">CPU型号</th>
    <th style="text-align: center;vertical-align: middle">CPU内核数</th>
    <th style="text-align: center;vertical-align: middle">硬盘</th>
    <th style="text-align: center;vertical-align: middle">备注</th>
    {% if perms.Assets.view_password %}
    <th style="text-align: center;vertical-align: middle">查看密码</th>
    {% endif %}
</tr>
{% endblock %}


{% block table_bady %}
{% for object in objects %}
 <tr>
    {% if perms.Assets.change_server %}
    <td class="check-mail" style="text-align: center;vertical-align: middle">
        <div class="checkbox i-checks"><input type="checkbox" id="server_{{ object.id }}" value="{{ object.id }}"></div>
    </td>
    {% endif %}
    <td style="text-align: center;vertical-align: middle">
        {% if perms.Assets.change_server %}
        <a href="{% url 'changeserver' %}?id={{ object.id }}">
            <span class="label label-sm label-success">{{ object.name }}</span>
        </a>
        {% else %}
        <a href="#">
             <span class="label label-sm label-success">{{ object.name }}</span>
        </a>
        {% endif %}
    </td>
    <td style="text-align: center;vertical-align: middle">{{ object.generatorroom.name }}</td>
    <td style="text-align: center;vertical-align: middle">{{ object.get_vlan_ip }}</td>
    <td style="text-align: center;vertical-align: middle">{{ object.get_wan_ip }}</td>
    <td style="text-align: center;vertical-align: middle">{{ object.memory }}GB</td>
    <td style="text-align: center;vertical-align: middle">{{ object.cpu.name }}</td>
    <td style="text-align: center;vertical-align: middle">{% get_cpu_kernels object %}</td>
    <td style="text-align: center;vertical-align: middle">
        <table class="table table-striped">
            <thead>
                <tr style="text-align: center;vertical-align: middle">
                    <th style="text-align: center;vertical-align: middle">磁盘名称</th>
                    <th style="text-align: center;vertical-align: middle">挂载目录</th>
                    <th style="text-align: center;vertical-align: middle">磁盘大小</th>
                </tr>
            </thead>
            <tbody>
                {% for disk in object.get_disks_list %}
                <tr>
                    <td style="text-align: center;vertical-align: middle">{{ disk.name }}</td>
                    <td style="text-align: center;vertical-align: middle">{{ disk.mount_path }}</td>
                    <td style="text-align: center;vertical-align: middle">{{ disk.size }}GB</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </td>
    <td>
        <div id="doc-content{{ object.id }}">
            <textarea style="display:none;">{{ object.description }}</textarea>
        </div>
    </td>
    {% if perms.Assets.view_password %}
    <td style="text-align: center;vertical-align: middle">
        <a class="btn btn-default " type="button" href="#" id="server_{{ object.id }}" value="{{ object.id }}" name="{{ object.name }}">
            <i class="fa fa-plus-square"></i>
        </a>
    </td>
    {% endif %}
 </tr>
{% endfor %}
{% endblock %}


{% block base_script %}
    <script src="/static/js/plugins/iCheck/icheck.min.js"></script>
    <script src="/static/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="/static/md/marked.min.js"></script>
    <script src="/static/md/prettify.min.js"></script>
    <script src="/static/md/raphael.min.js"></script>
    <script src="/static/md/underscore.min.js"></script>
    <script src="/static/md/sequence-diagram.min.js"></script>
    <script src="/static/md/flowchart.min.js"></script>
    <script src="/static/md/jquery.flowchart.min.js"></script>
    <script src="/static/md/editormd.min.js"></script>
{% endblock %}

{% block script %}

    <script>
        $(document).ready(function() {

            $('#date_added').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });

            $('#date_modified').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });

        });
    </script>

    <script type="text/javascript">
        $(function () {
             $('#check_all').on('ifChecked', function () {
                 $('input[id^=server_]').iCheck('check');
             });

             $('#check_all').on('ifUnchecked', function () {
                 $('input[id^=server_]').iCheck('uncheck');
             });

             $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
             },onclick="test()");


            $('#pages').val('{{ entry }}')
            $("a[id^='server_']").click(function () {
                $.post("{% url 'getserver_info' %}", {id:$(this).attr("value")}, function (data) {
                     swal("密码查看", "ROOT密码：" + data.password + '\n' + "MySQL密码：" + data.mysqlpwd);
                });
            });
            $('#download').click(function () {
                $.post("{% url 'server' %}", {
                    search:$('#top-search').attr('value'),
                    start:$('#start').attr('value'),
                    end:$("#end").attr('value')},
                    function (data) {
                    window.open(data.url);
                });
            });
            $('#pages').change(function () {
                var search = '{{ search }}'
                if (search == '') {
                    location.href = "{% url 'server' %}?page={{ num }}&entry=" + $(this).val();
                } else {
                    location.href = "{% url 'server' %}?page={{ num }}&{{ search }}&entry=" + $(this).val();
                }
            });
            $('#add_server').click(function () {
                location.href = "{% url 'addserver' %}";
            });
            $('#del_server').click(function () {
                swal({
                    title: "确定删除?",
                    text: "您是否确定要删除所选的服务器!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    closeOnConfirm: false
                    }, function () {
                        var server_id_list = new Array();
                        var trList = $("#server_table").children("tr")
                        for (var i=0;i<trList.length;i++) {
                            var tdArr = trList.eq(i).find("td");
                            var chechArr = tdArr.eq(0).find("div").find('input');
                            if (chechArr.is(":checked")) {
                                server_id = chechArr.val();
                                server_id_list.unshift(server_id);
                            }
                        }
                        if (server_id_list.length == 0) {
                            swal('错误', '请选择要删除的服务器', 'error');
                            return;
                        }
                        $.post("{% url 'delserver' %}", {ids:JSON.stringify(server_id_list)},function (data) {
                            if (data.status == 1) {
                                swal({title:"成功!", text:"删除所选服务器成功", type:"success"},function () {
                                    location.href = "{% get_url request %}"
                                });
                            } else {
                                swal("失败!", "未能删除所选服务器", "error");
                            }
                        }, 'json');
                    });
                });
        });
    </script>

    <script type="text/javascript">
    {% for object in objects %}
        var testEditor;
        $(function () {
            testEditor = editormd.markdownToHTML("doc-content{{ object.id }}", {//注意：这里是上面DIV的id
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tex: true, // 默认不解析
                flowChart: true, // 默认不解析
                sequenceDiagram: true, // 默认不解析
                codeFold: true,
        });});
    {% endfor %}
    </script>
{% endblock %}